<template>
    <div>
        <div class="search">
            <Row :gutter="16" class="all-height">
                <Col :span="showRight ? 18 : 24" class="all-height">
                    <Card class="all-height card-child-height">
                        <Row class="operation code-row-bg" style="display: flex; justify-content: space-between">
                            <Col span="22">
                                <Form ref="form" :model="searchForm" :label-width="0" label-position="left" class="marginForm" inline>
                                    <FormItem label="" prop="jb">
                                        <DatePicker
                                            v-model="searchForm.by"
                                            type="year"
                                            format="yyyy"
                                            :clearable="false"
                                            placeholder="选择毕业年度"
                                            style="width: 100%"
                                            @on-change="jbChange"
                                        ></DatePicker>
                                    </FormItem>
                                    <FormItem label="" prop="gx" v-hasRole="'ROLE_PROVINCE'">
                                        <Select v-model="searchForm.gx" transfer style="min-width: 200px">
                                            <Option v-for="(item,index) in gxList" :value="item.code" :key="index">{{ item.name }}</Option>
                                        </Select>
                                    </FormItem>
                                    <FormItem label="" prop="status" v-hasRole="'ROLE_PROVINCE'">
                                        <Select v-model="searchForm.status" style="width: 200px">
                                            <Option value="0">各高校就业率</Option>
                                            <Option value="1">就业统计8个率</Option>
                                        </Select>
                                    </FormItem>
                                    <FormItem label="" prop="status" v-hasRole="'ROLE_SCHOOL'">
                                        <Select v-model="searchForm.status" style="width: 200px">
                                            <Option value="0">本校就业率</Option>
                                            <Option value="1">就业统计8个率</Option>
                                        </Select>
                                    </FormItem>
                                    <FormItem label="">
                                        <Cascader :data="zyCodeList" placeholder="请选择专业" :load-data="zyLoadData" :render-format="zyFormat" v-model="searchForm.zyCode1" v-width="200" />
                                    </FormItem>
                                    <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                                </Form>
                                <!--                              <Button @click="add" type="primary" icon="md-add">添加</Button>-->
                                <!--                              <Button @click="delAll" icon="md-trash">批量删除</Button>-->
                                <!--                              <Button @click="getDataList" icon="md-refresh">刷新</Button>-->
                            </Col>
                        </Row>
                        <!--                      <Row v-show="openTip">-->
                        <!--                          <Alert show-icon>-->
                        <!--                              已选择-->
                        <!--                              <span class="select-count">{{ selectList.length }}</span> 项-->
                        <!--                              <a class="select-clear" @click="clearSelectAll">清空</a>-->
                        <!--                              <a class="select-clear" style="cursor: pointer" @click="getDataList">刷新</a>-->
                        <!--                          </Alert>-->
                        <!--                      </Row>-->
                        <Row class="calc-px-height">
                            <Table
                                :height="height1"
                                :loading="loading"
                                border
                                :columns="columns"
                                :data="data"
                                sortable="custom"
                                @on-sort-change="changeSort"
                                @on-selection-change="showSelect"
                                @on-row-dblclick="sjclaib"
                                ref="table"
                            ></Table>
                        </Row>
                        <!--                      <Row type="flex" justify="end" class="page">-->
                        <!--                          <Page-->
                        <!--                                  :current="searchForm.pageNumber"-->
                        <!--                                  :total="total"-->
                        <!--                                  :page-size="searchForm.pageSize"-->
                        <!--                                  @on-change="changePage"-->
                        <!--                                  @on-page-size-change="changePageSize"-->
                        <!--                                  :page-size-opts="[10, 20, 50, 100, 200]"-->
                        <!--                                  size="small"-->
                        <!--                                  show-total-->
                        <!--                                  show-elevator-->
                        <!--                                  show-sizer-->
                        <!--                          ></Page>-->
                        <!--                      </Row>-->
                    </Card>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import { geteMploymentRate, getGxList } from '@/api/bys/gxjyl/jyqx';
import checkPassword from '@/views/my-components/xboot/check-password.vue';
import addEdit from '@/views/bys/personInfo/addEditBys.vue';
import { getByXlAndLevel } from '@/api/bys/code';
import { getDictDataByType } from '@/api';

export default {
    name: 'gxjyl',
    components: { addEdit, checkPassword },
    data() {
        return {
            selectList: [],
            height1: 0,
            loading: true,
            columns: [
                {
                    title: ' ',
                    key: 'name',
                    minWidth: 160,
                    sortable: false
                },
                {
                    title: '专科毕业人数',
                    key: 'byrs1',
                    minWidth: 120,
                    sortable: false,
                    disability: false
                },
                {
                    title: '专科就业人数',
                    key: 'jyrs1',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '专科就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs1 === 0 ? '0%' : this.calculate(params.row.jyrs1, params.row.byrs1));
                    }
                },
                {
                    title: '本科毕业人数',
                    key: 'byrs2',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '本科就业人数',
                    key: 'jyrs2',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '本科就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs2 === 0 ? '0%' : this.calculate(params.row.jyrs2, params.row.byrs2));
                    }
                },
                {
                    title: '研究生毕业人数',
                    key: 'byrs3',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '研究生就业人数',
                    key: 'jyrs3',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '研究生就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs3 === 0 ? '0%' : this.calculate(params.row.jyrs3, params.row.byrs3));
                    }
                },
                {
                    title: '中专毕业人数',
                    key: 'byrs4',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '中专就业人数',
                    key: 'jyrs4',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '中专就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs4 === 0 ? '0%' : this.calculate(params.row.jyrs4, params.row.byrs4));
                    }
                },
                {
                    title: '毕业人数',
                    key: 'byrs',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '就业人数',
                    key: 'jyrs',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs === 0 ? '0%' : this.calculate(params.row.jyrs, params.row.byrs));
                    }
                }
            ],
            columns1: [
                {
                    title: ' ',
                    key: 'name',
                    minWidth: 160,
                    sortable: false
                },
                {
                    title: '专科毕业人数',
                    key: 'byrs1',
                    minWidth: 120,
                    sortable: false,
                    disability: false
                },
                {
                    title: '专科就业人数',
                    key: 'jyrs1',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '专科就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs1 === 0 ? '0%' : this.calculate(params.row.jyrs1, params.row.byrs1));
                    }
                },
                {
                    title: '本科毕业人数',
                    key: 'byrs2',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '本科就业人数',
                    key: 'jyrs2',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '本科就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs2 === 0 ? '0%' : this.calculate(params.row.jyrs2, params.row.byrs2));
                    }
                },
                {
                    title: '研究生毕业人数',
                    key: 'byrs3',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '研究生就业人数',
                    key: 'jyrs3',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '研究生就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs3 === 0 ? '0%' : this.calculate(params.row.jyrs3, params.row.byrs3));
                    }
                },
                {
                    title: '中专毕业人数',
                    key: 'byrs4',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '中专就业人数',
                    key: 'jyrs4',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '中专就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs4 === 0 ? '0%' : this.calculate(params.row.jyrs4, params.row.byrs4));
                    }
                },
                {
                    title: '毕业人数',
                    key: 'byrs',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '就业人数',
                    key: 'jyrs',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs === 0 ? '0%' : this.calculate(params.row.jyrs, params.row.byrs));
                    }
                }
            ],
            columns2: [
                {
                    title: ' ',
                    key: 'name',
                    minWidth: 160,
                    sortable: false
                },
                {
                    title: '专科就业人数',
                    key: 'jyrs1',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '专科就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs1 === 0 ? '0%' : this.calculate(params.row.jyrs1, params.row.byrs1));
                    }
                },
                {
                    title: '本科就业人数',
                    key: 'jyrs2',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '本科就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs2 === 0 ? '0%' : this.calculate(params.row.jyrs2, params.row.byrs2));
                    }
                },
                {
                    title: '研究生就业人数',
                    key: 'jyrs3',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '研究生就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs3 === 0 ? '0%' : this.calculate(params.row.jyrs3, params.row.byrs3));
                    }
                },
                {
                    title: '中专就业人数',
                    key: 'jyrs4',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '中专就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs4 === 0 ? '0%' : this.calculate(params.row.jyrs4, params.row.byrs4));
                    }
                },
                {
                    title: '就业人数',
                    key: 'jyrs',
                    minWidth: 120,
                    sortable: false
                },
                {
                    title: '就业率',
                    key: 'name',
                    minWidth: 120,
                    sortable: false,
                    render: (h, params) => {
                        return h('p', params.row.jyrs === 0 ? '0%' : this.calculate(params.row.jyrs, params.row.byrs));
                    }
                }
            ],
            data: [],
            searchForm: {
                pageNumber: 1,
                pageSize: 50,
                sort: 'createTime',
                order: 'desc',
                startDate: '',
                endDate: '',
                gx: '0',
                status: '0',
                zyCode: '',
                xlcc: '',
                zyCode1: '',
                jb: new Date().getFullYear(),
                by: new Date()
            },
            total: 0,
            gxList: [],
            zyCodeList: []
        };
    },
    methods: {
        init() {
            this.getDataList();
            this.getDictData();
        },
        getDataList() {
            this.loading = true;
            geteMploymentRate(this.searchForm).then(res => {
                this.loading = false;
                if (res.success) {
                    this.data = res.result;
                }
            });
        },
        getDictData() {
            // 学校
            getGxList().then(res => {
                if (res.success) {
                    this.gxList = res.result;
                    if (res.result.length > 0) {
                        this.searchForm.gx = res.result[0].code;
                    }
                }
            });
            //   学历层次
            getDictDataByType('eduLevelType').then(res => {
                if (res.success) {
                    this.zyCodeList = res.result.map(item => ({ ...item, label: item.title, loading: false, children: [] }));
                }
            });
        },
        jbChange(a, b) {
            this.searchForm.jb = a;
        },
        handleSearch() {
            this.getDataList();
            if (this.searchForm.status === '0') {
                this.columns = this.columns1;
            } else if (this.searchForm.status === '1') {
                this.columns = this.columns2;
            }
        },
        zyLoadData(item, callback) {
            item.loading = true;
            getByXlAndLevel({ gradLevelDict: item.value, level: '2' }).then(res => {
                item.children = res.result.map(item => ({ ...item, label: item.title, value: item.profCode }));
                item.loading = false;
                callback();
            });
        },
        zyFormat(labels, selectedData) {
            const index = labels.length - 1;
            const data = selectedData[index] || false;
            this.searchForm.xlcc = data.gradLevelDict;
            this.searchForm.zyCode = data.value;
            return labels;
        },
        changeSort(e) {
            this.searchForm.sort = e.key;
            this.searchForm.order = e.order;
            if (e.order == 'normal') {
                this.searchForm.order = '';
            }
            this.getDataList();
        },
        showSelect(e) {
            this.exportData = e;
            this.selectList = e;
        },
        sjclaib(v) {
            this.showRight = true;
            // 转换null为""
            for (let attr in v) {
                if (v[attr] == null) {
                    v[attr] = '';
                }
            }
            let str = JSON.stringify(v);
            let data = JSON.parse(str);
            this.form = data;
            this.showType = '1';
            this.showValue = true;
            this.openSearch = true;
            this.showUser = true;
            this.$refs.addOrEdit.sexCodeList = this.sexList;
            this.$refs.addOrEdit.mzList = this.mzList;
            this.$refs.addOrEdit.zzmmList = this.zzmmList;
            this.$refs.addOrEdit.xlccList = this.xlccList;
            this.$refs.addOrEdit.xlList = this.xlList;
            this.$refs.addOrEdit.zyList = this.zyList;
            this.$refs.addOrEdit.xxxsList = this.xxxsList;
            this.$refs.addOrEdit.pyfsList = this.pyfsList;
            this.$refs.addOrEdit.xzList = this.xzList;
            this.$refs.addOrEdit.sfslbList = this.sfslbList;
            this.$refs.addOrEdit.knslbList = this.knslbList;
            this.$refs.addOrEdit.form = data;
        },
        changePage(v) {
            this.searchForm.pageNumber = v;
            this.getDataList();
            this.clearSelectAll();
        },
        changePageSize(v) {
            this.searchForm.pageSize = v;
            this.getDataList();
        },
        calculate(a, b) {
            const num = (a / b) * 100;
            const percent = num.toFixed(2) + '%';
            return percent;
        }
    },
    mounted() {
        this.init();
    }
};
</script>

<style scoped lang="less"></style>
